<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Canvas 绘制矩形</title>
</head>
<body>
 <canvas id="canvas_demo" width="800" height="800">
  您的浏览器不支持canvas，请升级浏览器。
 </canvas>
 <script>
  /** @type {HTMLCanvasElement} */
  const canvasDemo = document.getElementById('canvas_demo')
  const ctx = canvasDemo.getContext('2d')
  ctx.moveTo(100, 100)
  ctx.lineTo(400, 100)
  ctx.lineTo(400, 300)
  ctx.lineTo(100, 300)
  ctx.closePath()
  ctx.fillStyle = 'red'
  ctx.fill()
  ctx.stroke()

  ctx.beginPath()
  ctx.moveTo(100, 400)
  ctx.rect(100, 400, 300, 200)
  ctx.fill()
  ctx.stroke()

  ctx.clearRect(200, 200, 600, 600)
 </script>
</body>
</html>